<template>
  <div class="button-group">
    <el-button-group>
      <el-button
        v-if="buttonType.includes('add')"
        icon="Plus"
        v-hasPermi="hasPermiAdd"
        :disabled="disabledAdd"
        :title="$t('新增')"
        @click="onAdd"
        class="el-button-plus"
      />
      <el-button
        v-if="buttonType.includes('edit')"
        icon="Edit"
        v-hasPermi="hasPermiEdit"
        :disabled="disabledEdit"
        :title="$t('编辑')"
        @click="onEdit"
      />
      <el-button
        v-if="buttonType.includes('delete')"
        icon="Delete"
        v-hasPermi="hasPermiDelete"
        :disabled="disabledDelete"
        :title="$t('删除')"
        @click="onDelete"
      />
      <slot></slot>
    </el-button-group>
  </div>
</template>

<script setup>
import { defineEmits } from "vue";
const props = defineProps({
  disabledAdd: {
    type: Boolean,
    default: false,
  },
  disabledEdit: {
    type: Boolean,
    default: false,
  },
  disabledDelete: {
    type: Boolean,
    default: false,
  },
  buttonType: {
    type: [Array, String],
    default: () => ["add", "edit", "delete"],
  },
  hasPermiAdd: {
    type: Array,
    default: [],
  },
  hasPermiEdit: {
    type: Array,
    default: [],
  },
  hasPermiDelete: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["add", "edit", "delete"]);
const onAdd = () => {
  emits("add");
};
const onEdit = () => {
  emits("edit");
};
const onDelete = () => {
  emits("delete");
};
</script>

<style lang="scss" scoped>
.button-group {
  // padding: 0 5px;
}
:deep() .el-button {
  width: 48px;
  height: 32px;
  font-size: 17px;
}
</style>